<script setup lang='ts'>
  import { ToUserAndRoom, getOSSFile } from '@/utils/public';
  const props = defineProps({
    image:{
      type:String,
      default:''
    },
    user_id:{
      type:[Number,String],
      default:0
    },
    rankNoImg:{
      type:Boolean,
      default:false
    }
  })
</script>

<template>
  <div @click="ToUserAndRoom({
    user_id,
  })" :class="['portrait',rankNoImg?'backColor':'']">
    <div class="imgBorder">
      <div class="relative">
        <img v-if="image" :src="getOSSFile(image)" class="portraitImg centerImg">
        <template v-if="!image">
          <img v-if="!rankNoImg" src="@/assets/images/icon2.png" class="noIcon">
          <img v-if="rankNoImg" src="@/assets/images/icon3.png" class="noIcon2 centerImg">
        </template>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .portrait {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 1px;
    box-sizing: border-box;
    border-radius: 100%;
    background: #fff;
    .imgBorder {
      overflow: hidden;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: inherit;
      .relative {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .noIcon {
      width: 100%;
      height: 100%;
    }
    .noIcon2 {
      width: 30px;
      height: 30px;
    }
    .portraitImg {
      width: auto;
      min-width: 100%;
      height: 100%;
    }
    .centerImg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .backColor {
    background: #FFE6D7;
  }
</style>